<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>人员管理</title>
		<base href="<%=basePath%>">
		<link rel="stylesheet" href="res/layui/css/layui.css">
		<script src="res/js/jquery-2.1.4.min.js" type="text/javascript" ></script>
		<script src="res/layui/layui.js"></script>
	</head>
	<body>
		
		<div style="padding-top: 10px;margin-bottom: -10px;" lay-filter="seachForm">
			<form id="seachForm" class="layui-form" style="display: inline;">
				<div class="layui-inline" style="width: 140px;">
					<select class="layui-input" name="departId" id="departId" autocomplete="off">
					
					</select>
				</div>
				<div class="layui-inline" style="width: 140px;">
					<select class="layui-input" name="annexId" id="annexId" autocomplete="off">
					
					</select>
				</div>
				账号：
				<div class="layui-inline" style="width: 140px;">
					<input class="layui-input" name="staffAccount" id="staffAccount"
						autocomplete="off">
				</div>
				职位：
				<div class="layui-inline" style="width: 140px;">
					<input class="layui-input" name="staffPost" id="staffPost"
						autocomplete="off">
				</div>
				地址：
				<div class="layui-inline">
					<input class="layui-input" name="staffDizhi" id="staffDizhi"
						autocomplete="off">
				</div>
			</form>
			<button class="layui-btn" data-type="reload" onclick="reloadData()">搜索</button>
			<button data-type="auto" class="layui-btn layui-btn-normal"
				onclick="showAddOrUpdate()">新增</button>
			<form action="staff/downExcel.action" method="post" style="display:inline;">
				<input type="hidden" id="jsonStr" name="jsonStr" />
				<button data-type="auto" class="layui-btn layui-btn-normal">导出Excel</button>
			</form>
			<button data-type="auto" class="layui-btn layui-btn-normal" onclick="noneDiv()">上传Excel</button>
		</div>
		
		<table class="layui-table" id="staff" lay-filter="demo"></table> 
		<div id="noneDiv" style="display: none;padding-top: 80px;">
			<div align="center" style="margin: 40px;">
				<h2>Excel文件格式如下（若格式不正确可能导致导入失败）！</h2>
				<img alt="" src="res/images/ExcelStyle.png" style="margin-top: 20px">
			</div>
			<form enctype="multipart/form-data" id="batchUpload"  action="user/upload" method="post"  align="center" class="form-horizontal" style="display: inlne;">    
			    <button class="layui-btn" id="uploadEventBtn" type="button" >选择文件</button> 
			    <input type="file" name="file"  style="width:0px;height:0px;" id="uploadEventFile">
			    <input id="uploadEventPath"  disabled="disabled"  type="text" placeholder="请选择excel表" class="layui-input" style="border: 1px solid #e6e6e6; width: 200px; display: inline;" >                                 
				<input class="layui-btn" type="button" onclick="staff.uploadBtn()" onclick="staff.uploadBtn()" value="上传"/>
			</form>
			<!-- <button type="button" class="btn btn-success btn-sm"  onclick="staff.uploadBtn()" >上传</button> -->
		</div>
		<script type="text/html" id="demo">
			<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="allot">分配角色</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<script type="text/javascript">
		
		var Staff = function(){  
		      
		    this.init = function(){
		          
		        //模拟上传excel  
		         $("#uploadEventBtn").unbind("click").bind("click",function(){  
		             $("#uploadEventFile").click();  
		         });  
		         $("#uploadEventFile").bind("change",function(){  
		             $("#uploadEventPath").attr("value",$("#uploadEventFile").val());  
		         });
		          
		    };  
		    //点击上传按钮  
		    this.uploadBtn = function(){  
		        var uploadEventFile = $("#uploadEventFile").val();  
		        if(uploadEventFile == ''){  
		        	layer.msg("请选择excel,再上传");  
		        }else if(uploadEventFile.lastIndexOf(".xls")<0){//可判断以.xls和.xlsx结尾的excel  
		        	layer.msg("只能上传Excel文件");  
		        }else{  
		            var url =  'staff/uploadExcel.action';
		            var formData = new FormData($('#batchUpload')[0]);  
		            staff.sendAjaxRequest(url,'POST',formData);
		        }  
		    };  
		      
		    this.sendAjaxRequest = function(url,type,data){  
		        $.ajax({  
		            url : url,  
		            type : type,  
		            data : data,  
		            success : function(result) {  
		            	if(result.state==1){
		            		layer.msg("excel数据导入成功");  
		            		layer.close(uploadIndex);
		            		table.reload('staffId');
		            	}
		            },  
		            error : function() {  
		                layer.msg( "excel上传失败");  
		            },  
		            cache : false,  
		            contentType : false,  
		            processData : false  
		        });  
		    };  
		}  
		
		var staff;  
		
		</script>               
		
		<script>

		var table;
		
		var form;

		var loadIndex;

		var openIndex;
		
		var uploadIndex;
		
		var uploadExcelStr = "";
		
		function noneDiv(){
			if(uploadExcelStr==""){
				uploadExcelStr = $("#noneDiv").html();
			}
			uploadIndex = layer.open({
				type : 1//样式
				,
				skin : 'layui-layer-molv'//样式
				,
				area : [ '85%', '70%' ],
				title : "员工导入"//标题
				,
				id : 'mesFrom' //防止重复弹出
				,
				content : uploadExcelStr,
				shade : [ 0.8, '#393D49' ] //显示遮罩
				,
				shadeClose : true//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
			$("#noneDiv").html("");
			staff = new Staff();  
		    staff.init();
		}
		
		function showAddOrUpdate(staffId){
			var url;
			if (staffId != null) {
				url = "pages/staffForm.jsp?staffId=" + staffId;
			} else {
				url = "pages/staffForm.jsp";
			}
			openIndex = layer.open({
				type : 2//样式
				,
				skin : 'layui-layer-molv'//样式
				,
				area : [ '85%', '70%' ],
				title : "人员维护"//标题
				,
				id : 'mesFrom' //防止重复弹出
				,
				content : url,
				shade : [ 0.8, '#393D49' ] //显示遮罩
				,
				shadeClose : true//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
		}
		
		layui.use(['table','form'], function() {
			table = layui.table;
			loadIndex = layer.load();
			//方法级渲染
			table.render({
				loading : true,
				id : 'staffId',
				page : true,
				height : 383,
				size : "sm",
				elem : '#staff',
				url : 'staff/showList.action',
				method : 'post',
				where : {

				},
				cols : [ [ {
					field : 'departName',
					title : '部门',
					width : 100,
					align : 'center',
					sort : true
				},{
					field : 'annexName',
					title : '分店',
					width : 150,
					align : 'center',
					sort : true
				},{
					field : 'staffName',
					title : '员工姓名',
					width : 150,
					align : 'center',
					sort : true
				},{
					field : 'staffAccount',
					title : '账号',
					width : 150,
					align : 'center',
					sort : true
				}, {
					field : 'staffPwd',
					title : '密码',
					width : 150,
					align : 'center',
					sort : true
				}, {
					field : 'staffPost',
					title : '职位',
					width : 150,
					align : 'center',
					sort : true
				}, {
					field : 'staffDizhi',
					title : '地址',
					width : 300,
					align : 'center',
					sort : true
				}, {
					field : 'staffPhone',
					title : '手机',
					width : 300,
					align : 'center',
					sort : true
				}, {
					field : 'staffRemar',
					title : '备注',
					width : 300,
					align : 'center',
					sort : true
				}, {
					fixed : 'right',
					width : 240,
					align : 'center',
					toolbar : '#demo'
				} ] ]

				,
				done : function(res, curr, count) {
					layer.close(loadIndex);//加载层关闭  
					var jsonStr = JSON.stringify(res);
					$("#jsonStr").val(jsonStr);
				}
			});
			
			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						var i = layer.load();
						deleteRec(data.staffId, i);
						obj.del();
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					showAddOrUpdate(data.staffId);
					
				} else if (obj.event === 'allot') {
					
					allot_role(data.staffId);
				}
			});
			
			form = layui.form;
			
			
			
			showSelect();
			
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		
		/**
			显示查询栏的部门和分店的下拉框
		*/
		function showSelect(){
			$("#departId").html('<option value="">请选择部门</option>');
			$("#annexId").html('<option value="">请选择分店</option>');
			$.ajax({
				type : "POST",
				url : "department/showList.action",
				data : {"page":1,"limit":9999}, 
				async : false,
				error : function(){
					layer.msg("发生未知错误，请稍后重试");
				},
				success : function(map){
					var data = map.data;
					for(i=0; i<data.length; i++){
						var obj = data[i];
						$("#departId").append('<option value="'+obj.departId+'">'+obj.departName+'</option>');
					}
				}
			});
			$.ajax({
				type : "POST",
				url : "annex/annexAjax.action",
				data : {"page":1,"limit":9999},
				async : false,
				error : function(){
					layer.msg("发生未知错误，请稍后重试");
				},
				success : function(map){
					var data = map.data;
					for(i=0; i<data.length; i++){
						var obj = data[i];
						$("#annexId").append('<option value="'+obj.annexId+'">'+obj.annexName+'</option>');
					}
				}
			});
			
			form.render();
		}
		
		function reloadData(){
			table.reload('staffId', {
				where : {
					'departId' : $("#departId").val(),
					'annexId' : $("#annexId").val(),
					'departKind' : $("#departKind").val(),
					'departKind' : $("#departKind").val(),
					'departKind' : $("#departKind").val()
				}
			});
		}
		
		function deleteRec(staffId,i){
			var url = "staff/delete.action";
			$.post(url, {
				"staffId" : staffId
			}, function(info) {
				layer.msg(info.mes);
				layer.close(i);
			});
		}
		
		/*用户-分配角色*/
		 function allot_role(id){
			  layer.open({
			        type: 2//样式
			        ,skin: 'layui-layer-rim'//样式 加上边框 molv
			        ,area: ['500px', '300px']
				    ,title: '员工维护'
				    ,id : "roleFrom"
			        ,shade: [0.8, '#393D49'] //显示遮罩
			        ,shadeClose:true//点击也能遮罩层关闭
			        ,anim:3//弹出动画
			        ,maxmin: true //允许全屏最小化
			        ,content: 'pages/allotRole.jsp?staffId='+id
			      });	
		  }
		
		</script>
		
	</body>
</html>